<template>
    <view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view>
			<map-with-route :height="mapHeight" :maptype="1" :destination="{ latitude: upmap.map_lat, longitude: upmap.map_lng }" />
		</view>
		<view class="passenger-info">
			<view class="order-title">
				司机信息
			</view>
			<view class="user-info">
			    <view class="info-details">
			        <view class="name">司机：{{ drive.realname }}</view>
			        <view class="phone">电话：{{ drive.mobile }}</view>
			    </view>
			    <view class="contact-button">
			        <button class="siji-phone" @click="callPhone(drive.real_mobile)">
			            <u-icon name="phone" color="#FFF" size="22"></u-icon>
			            <text>联系司机</text>
			        </button>
			    </view>
			</view>
			
			<phone-yinsi></phone-yinsi>
			
			<view class="pickup-location">
			    <view class="icon">
			        <u-icon name="map-fill" color="#1B90F0" size="22"></u-icon>
			    </view>
				<view class="location-address">
					<view class="label">司机到达位置</view>
					<view class="location">{{ upmap.address }}</view>
				</view>
			</view>
			<view class="order-item">
				<view>司机到达时间</view>
				<view>{{upmap.create_time}}</view>
			</view>
			<view class="order-item">
				<view>拍摄照片：</view>
				<view>
					<my-album :urls="upmap.images_list" keyName='images_url' rowCount="3" maxCount="3" singleSize="70"></my-album>
				</view>
			</view>
			<view class="order-item">
				<view>司机留言：</view>
				<view>{{upmap.content}}</view>
			</view>
		</view>
		
		<view class="passenger-info">
			<view class="order-title">
				订单信息
			</view>
			<view class="order-item">
				<view>订单编号</view>
				<view>{{order.order_sn}}</view>
			</view>
			<view class="order-item">
				<view>下单时间</view>
				<view>{{order.create_time}}</view>
			</view>
			<view class="order-item">
				<view>订单状态</view>
				<view>{{order.order_status_name}}</view>
			</view>
			
			<view class="com-car">
				<view class="figure">
					<view class="thumb-tag" style=""></view>
					<image class="img" mode="aspectFill" :src="car.thumb"></image>
					
				</view>
				<view class="com-car-desc">
					<view class="title" :class="car.car_info.gearbox=='手动挡'?'title-hand':'title-auto'">
						<view class="p aui-ellipsis-1">{{car.name}}</view>
						<view class="em"></view>
					</view>
					<view class="plate-type">
						<text>{{car.car_info.gearbox}}</text>
						<text>{{car.car_info.year}}年</text>
						<text>{{car.car_info.car_level}}</text>
					</view>
					<view class="car-card" v-if="car.car_num">
						<text>{{car.car_num}}</text>
					</view>
				</view>
			</view>
			
			<view class="trip-duration">
			    <view class="trip-start">
			        <view class="date">{{order.start_day.date}}</view>
			        <view class="time">{{order.start_day.week}} {{order.start_day.time}}</view>
			    </view>
			    <view class="duration-separator">——</view>
			    <view class="duration">{{ order.days_num }}天</view>
			    <view class="duration-separator">——</view>
			    <view class="trip-end">
			        <view class="date">{{order.end_day.date}}</view>
			        <view class="time">{{order.end_day.week}} {{order.end_day.time}}</view>
			    </view>
			</view>
			
			<!-- <view class="user-info">
			    <view class="info-details">
			        <view class="name">租客：{{ order.realname }}</view>
			        <view class="phone">电话：{{ order.mobile }}</view>
			    </view>
			    <view class="contact-button">
			        <button @click="callPhone(order.mobile)">
			            <u-icon name="phone" color="#FFF" size="22"></u-icon>
			            <text>联系租客</text>
			        </button>
			    </view>
			</view>
			<view class="pickup-location">
			    <view class="icon">
			        <u-icon name="map-fill" color="#40B24E" size="22"></u-icon>
			    </view>
				<view class="location-address">
					<view class="label">租客上车点</view>
					<view class="location">{{ order.gain_address }}</view>
				</view>
			</view> -->
		</view>
    </view>
</template>

<script>
	import { mapState } from 'vuex'
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		components:{

		},
		data() {
			return {
				nav_title:'代驾租车情况',
				id:0,
				order:{},
				drive:{},
				upmap:{},
				car:{},
				mapHeight:'500rpx',
			};
		},
		onLoad(option){
			this.id=option.id
			this.initData();
		},
		onShow() {
			
		},
		watch: {
		},
		computed: {
			...mapState({
				isLogin: state => state.$isLogin,
				userType: state => state.$userType,
			}),
		},
		methods: {
			initData(){
				// 获取订单信息
				this.$u.api.orderInfo({order_id:this.id}).then(res=>{
					this.order=res.data.order;
					this.drive=res.data.drive;
					this.upmap=res.data.option;
					this.car=res.data.car;
				})
			},
			// 导航去上车点
			goToPort(){
				uni.openLocation({
					latitude: this.order.gain_lat,
					longitude: this.order.gain_lng,
					name: this.order.gain_address,
					address: this.order.gain_address,
					success: function () {
						console.log('导航成功');
					},
					fail: function (error) {
						console.error('导航失败：', error);
					}
				});
			},
			// 联系租客或者司机
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		}
	};
</script>

<style lang="scss">
	page{
		background-color: #EFEFEF;
	}
	.passenger-info {
	  font-size: 28rpx;
	  background-color: #fff;
	  border-radius: 20rpx;
	  padding: 40rpx 30rpx;
	  margin: 30rpx;
	  box-sizing: border-box;
	}

	.user-info {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding:0rpx 0rpx 20rpx 0rpx;
	}

	.info-details {
	  flex: 1;
	}

	.contact-button button{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 0rpx 20rpx;
	  border-radius: 40rpx;
	  font-size: 30rpx;
	  color: #FFF;
	  background-color: #40B24E;
	}
	
	.contact-button .siji-phone {
		background-color: #1B90F0;
	}
	.contact-button button text {
	  margin-left: 5rpx;
	}

	.trip-duration {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 20rpx 0rpx;
	}

	.trip-start, .trip-end {
	  text-align: center;
	}

	.trip-start .date, .trip-end .date {
	  font-size: 32rpx;
	  font-weight: bold;
	  margin-bottom: 5rpx;
	}

	.trip-start .time, .trip-end .time {
	  font-size: 26rpx;
	  color: #999;
	}

	.duration-separator {
	  color: #D8D8D8;
	}

	.pickup-location {
		display: flex;
		align-items: center;
		word-wrap: break-word;
		overflow-wrap: break-word;
		padding-bottom:20rpx;
	}

	.pickup-location .location {
	  color: #909090;
	}

	.icon {
	  margin-right: 5px;
	}

	.current-location {
	  font-size: 28rpx;
	  margin: 20rpx;
	  margin-top: 30rpx;
	  background-color: #fff;
	  border-radius: 20rpx;
	  padding: 30rpx;
	}

	.location-details {
	  font-size: 28rpx;
	}

	.location-details .coordinates {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  margin: 20rpx 0rpx;
	}

	.location-details .coordinates .reset-location {
	  font-size: 28rpx;
	  border-radius: 40rpx;
	  padding: 0rpx 20rpx;
	  margin: 0rpx;
	  color: var(--view-butfont);
	  background: linear-gradient(to right, var(--view-butcolor1), var(--view-butcolor2));
	}

	.location-details .coordinates .reset-location text {
	  margin-left: 5rpx;
	  margin-bottom: 20rpx;
	}

	.location-address{
		width: 580rpx;
	}
	
	.photo-instructions {
	  margin-top: 10px;
	}

	.instruction-text {
	  text-align: center;
	  color: $u-tips-color;
	  font-size: 26rpx;
	  padding: 10rpx 0rpx;
	}

	.upload {
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  margin-top: 10px;
	}

	.confirm-button {
	  margin-top: 20px;
	}

	.title {
	  font-size: 32rpx;
	  font-weight: bold;
	}

	.coordinates {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}

	.reset-location {
	  font-size: 28rpx;
	  border-radius: 40rpx;
	  padding: 0rpx 20rpx;
	  margin: 0rpx;
	  color: var(--view-butfont);
	  background: linear-gradient(to right, var(--view-butcolor1), var(--view-butcolor2));
	}

	.close-icon {
	  position: absolute;
	  top: 16px;
	  right: 16px;
	  z-index: 1000;
	}

	.map-route {
	  width: 100vw;
	  height: 100vh;
	}
	
	.order-item{
		display: flex;
		align-items:center;
		justify-content: space-between;
		padding-bottom: 20rpx;
	}
	.order-title{
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid $u-border-color;
		margin-bottom: 15rpx;
	}
	
	.com-car,.com-car-desc {
	    width: 100%;
	    overflow: hidden;
	}
	
	.com-car {
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	    padding: 20rpx 0;
	    background: #fff;
	    border-bottom: 1px solid #f2f2f2;
	}
	
	.com-car .figure {
	    position: relative;
	    -ms-flex-negative: 0;
	    flex-shrink: 0;
	    width: 206rpx;
	    height: 142rpx;
	    margin-right: 30rpx;
	    border-radius: 4rpx;
	}
	
	.com-car .figure.yanxuan {
	    border: solid 6rpx #ecc571;
	}
	
	.com-car .figure.yanxuan .img {
	    border-radius: 0;
	}
	
	.com-car .figure .img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    background: #f5f5f5;
	    border-radius: 4rpx;
	}
	
	.com-car .figure .thumb-tag {
	    position: absolute;
	    top: -6rpx;
	    left: -6rpx;
	    z-index: 9;
	    display: block;
	}
	
	.com-car-desc {
	    flex: 1;
	}
	
	.com-car-desc .title {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    margin-top: -5rpx;
	    margin-bottom: 5rpx;
	    overflow: hidden;
	    font-weight: 700;
	    font-size: 34rpx;
	}
	
	.com-car-desc .title .p {
	    display: block;
	    max-width: -webkit-calc(100% - 44rpx);
	    line-height: 1.4;
	}
	
	.com-car-desc .title .aui-ellipsis-1 {
	    display: block;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	
	.com-car-desc .title .em {
	    display: block;
	    width: 34rpx;
	    height: 34rpx;
	    margin-left: 10rpx;
	}
	
	.com-car-desc .title.title-hand .em {
	    background: url(@/static/images/icon-shou.png) 50% no-repeat;
	    background-size: cover;
	}
	
	.com-car-desc .title.title-auto .em {
	    background: url(@/static/images/icon-zi.png) 50% no-repeat;
	    background-size: cover;
	}
	
	.com-car-desc .plate-type {
	    margin-bottom: 10rpx;
	    color: #666;
	    font-size: 26rpx;
	}
	
	.com-car-desc .plate-type text{
		margin-right: 10rpx;
	}
	.car-card text{
		color: #FFF;
		background-color: #0077FA;
		font-size: 28rpx;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
	}
</style>
